// useDebugValue 工具hook.是一个专为开发者调试自定义 Hook 而设计的 React Hook。
// 它允许你在 React 开发者工具中为自定义 Hook 添加自定义的调试值。注意观察 ReactDevTools

// 语法：useDebugValue(value, format?)

// 入参
// value: 要在 React DevTools 中显示的值
// formatter?: (可选) 格式化函数  作用：自定义值的显示格式
// formatter函数的   调用时机：仅在 React DevTools 打开时才会调用，可以进行复杂的格式化操作
//                  参数：接收 value 作为参数
//                  返回：返回格式化后的显示值

// 返回值
// 无返回值

import { Button } from 'antd'
import { useDebugValue, useState } from 'react'

// 案例：写一个cookie 自定义useCookie 查改删的操作。观察 ReactDevTools和application中cookie的变化

// 1.自定义hook函数创建独立文件，或者写在函数组件外面
// 思考怎么设计这个hook。传入什么参数？return什么值或者函数？
const useCookie = (name: string, initialValue: string = '') => {
  // 查
  const getCookie = () => {
    console.log('getCookie')

    // 获取cookie有固定的API
    const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`))
    // cookie的格式 0：键名name 1：'' 2:键值value
    return match ? match[2] : initialValue
  }
  // 使用useState将状态显示在React组件中
  const [cookie, setCookie] = useState(getCookie())
  // 改
  const updateCookie = (value: string, options?: any) => {
    // 修改cookie有固定的API
    document.cookie = `${name}=${value};${options}`
    setCookie(value)
  }
  const deleteCookie = () => {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;` // 直接设置过期删除cookie
    setCookie(initialValue)
  }

  // 通过ReactDevTools查看自定义hook的调试值。就不用那么频繁去Application中查看cookie了
  useDebugValue(cookie, (value) => {
    // 自定义hook的调试值
    return `格式化的cookie: ${value}`
  })

  return [cookie, updateCookie, deleteCookie] as const
}
const App = () => {
  const [cookie, updateCookie, deleteCookie] = useCookie('customcookie', 'great')
  return (
    <>
      <p>{cookie}</p>
      <Button
        onClick={() => {
          updateCookie('update-great18')
        }}>
        更新
      </Button>
      <Button
        onClick={() => {
          deleteCookie()
        }}>
        删除
      </Button>
    </>
  )
}

export default App
